{% extends "base.html" %}

{% block title %}
    Node List
{% endblock %}

<!-- TODO: Hover/tooltip for status icons -->

{% block extra_script %}
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.lightswitch.js') }}"></script>
    <script type="text/javascript" charset="utf-8">
	    $(document).ready(function() {
		    $('#nodelist').dataTable(
                {
		        "bJQueryUI": true,
                "bPaginate": false,
                "bLengthChange": true,
		        "bFilter": true,
		        "bSort": true,
		        "bInfo": true,
		        "bAutoWidth": true
	            }
            );
            $('.switch').lightSwitch();
		} );

    </script>
{% endblock %}

{% block content %}
<div class='footpad'></div>
<div id='main'>
    <table border="0" class="display" id="nodelist">
        <thead><tr><th>status</th></th><th>id</th><th>name</th><th>location</th><th>type</th><th>state</th><th>battery</th></tr></thead>
        <tbody>
        {% for node in nodes %}
            <tr>
                <td align="center">
                    <!-- TODO: show different status icon if sensor alarmed -->
                    {% if node.isSleeping %}
                    <img width="16" height="16" src="{{ url_for('static', filename='images/sleeping.png') }}" alt="sleeping"/>
                    {% else %}
                    <img width="16" height="16" src="{{ url_for('static', filename='images/ok.png') }}" alt="ok"/>
                    {% endif %}
                </td>
                <td align="right"><a href="{{ url_for('show_node', id=node.id) }}">{{ node.id }}</a></td>
                <td>{{ node.name }}</td><td>{{ node.location }}</td><td>{{ node.productType }}</td>
                <td align="center">
                    <!-- TODO: State display for binary sensor --> 
                    <!-- TODO: State display for multilevel sensor (sparkline?) -->
                    <!-- TODO: remove light switch, takes up too much room.  Switch to simple bulb metaphor instead. -->
                    {% if (node.hasCommandClass(37) or node.hasCommandClass(38)) and not node.isSleeping %}
                    <input class='switch' id='node_{{ node.id }}' type='checkbox' value='{{ node.isOn or node.level > 0}}' {% if node.isOn or node.level > 0 %}checked='checked'{% endif %} />
                    {% endif %}
                </td>
                <td align="center" valign="middle">
                    <!-- TODO: Simplify this -->
                    {% if node.batteryLevel < 0 %}
                    &nbsp;
                    {% elif node.batteryLevel in range(0,24) %}
                    <img width="32" height="16" src="{{ url_for('static', filename='images/battery_0.png') }}" alt="{{ node.batteryLevel }}"/>
                    {% elif node.batteryLevel in range(25,49) %}
                    <img width="32" height="16" src="{{ url_for('static', filename='images/battery_25.png') }}" alt="{{ node.batteryLevel }}"/>
                    {% elif node.batteryLevel in range(50,74) %}
                    <img width="32" height="16" src="{{ url_for('static', filename='images/battery_50.png') }}" alt="{{ node.batteryLevel }}"/>
                    {% elif node.batteryLevel in range(75,99) %}
                    <img width="32" height="16" src="{{ url_for('static', filename='images/battery_75.png') }}" alt="{{ node.batteryLevel }}"/>
                    {% else %}
                    <img width="32" height="16" src="{{ url_for('static', filename='images/battery_100.png') }}" alt="{{ node.batteryLevel }}"/>
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}